.demo {
    /* for IE10+ touch devices */
    touch-action: none;
}

/** ELEMENT POSITIONS **/
#dragDropWindow1 {
    top: 76px;
    left: 100px;
}

#dragDropWindow2 {
    top: 148px;
    left: 600px;
}

#dragDropWindow3 {
    top: 340px;
    left: 100px;
}

#dragDropWindow4 {
    top: 416px;
    left: 600px;
}

/** ELEMENTS **/
.drag-drop-demo > .window {
    position: absolute;
}
.drag-drop-demo .window {
    font-family: serif;
    font-style: italic;
    background-color: white;
    border: 1px solid #346789;
    text-align: center;
    z-index: 24;
    cursor: pointer;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;

    color: black;
    padding-top: 5px;
    width: 100px;
    height: 80px;
    line-height: 12px;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
}

.window:hover,
.container:hover,
#canvas .window.ui-selected,
#canvas .window.ui-selecting {
    border: 1px solid #123456;
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #fff;
    opacity: 0.9;
}

.drag-drop-demo .container {
    position: absolute;
}
.container {
    padding: 10px;
}
.drag-drop-demo .container {
    min-width: 112px;
    width: auto;
    min-height: 100px;
    height: auto;
    /*float: left;*/
    z-index: 24;
    padding: 10px;
    background-color: white;
    border: 1px solid #346789;
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
}

.container .condrog {
    min-width: inherit;
    width: 100%;
    height: 100%;
    min-height: 97px;
    float: left;
    /*padding: 5px;*/
    border: 1px solid red;
}


.container .window {
    float: left;
    margin: 5px;
}

.drag-drop-demo a, .drag-drop-demo a:visited {
    color: #057D9F;
}

.drag-drop-demo a:hover {
    color: orange;
}

/** LINKS IN WINDOWS **/
.drag-locked {
    border: 1px solid red;
}

.cmdLink {
    font-size: 0.80em;
}

/** DRAG/DROP CLASSES **/
.dragActive {
    border: 2px dotted orange;
}

.dropHover {
    border: 1px dotted red;
}

/** INFO WINDOW **/
#list {
    text-align: center;
    display: none;
    font-size: 90%;
    position: absolute;
    width: 500px;
    left: 50%;
    margin-left: -250px;
    top: 100px;
    background-color: white;
    padding: 5px;
    border: 1px solid #456;
    opacity: 0.8;
    border-radius: 8px;
    color: #444;
}

#list table {
    width: 100%;
}

#list table th, #list strong {
    color: black;
    font-size: 12px;
    text-align: center;
}

path, .jsplumb-endpoint {
    cursor: pointer;
}
